<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'

  export default {
    // type  AB  AO  BO
    props: ['type'],
    data() {
      return {
        markAreas: {},
        charts: '',
        yList: [],
        yList2: [],
        yDatas: [],
        timerList: [],
        seriesList: [{

          itemStyle: {
            normal: {
              lineStyle: {
                width: 63//设置线条粗细
              }
            }
          }
        }],
        monitorName: '',
      }
    },
    computed: {

      options() {
        function formatter(params, ticket, callback) {
          var contentArr = []
          for (var i = 0; i < params.length; i++) {
            var data = params[i]
            if (i === 0) {
              contentArr.push('孔深：' + data.name + 'm')
            }
            let y = String(data.value).indexOf(".") + 1;//获取小数点的位置
            let count = String(data.value).length - y;//获取小数点后的个数

            contentArr.push(data.marker + data.seriesName + '：' + data.value + 'mm')

          }
          contentArr.push("<i style='font-size:10px' >提示：点击查看时间位移曲线</i>")
          return contentArr.join('<br/>')
        }

        var cate = [
          "0001",
          "0002",
          "0003",
          "0004",
          "0005",
          "0006",
          "0007",
          "0008",
          "0009",
          "0010",
        ];
        //数据值，顺序和Y轴的名字一一对应
        return {
          title: {
            text: `${this.monitorName}`,
            x: 'center'
          },
          //提示框组件
          tooltip: {
            // 设置为坐标轴触发
            trigger: 'axis',
            // 提示框悬浮内容格式器
            formatter: formatter
          },
          // 图例组件
          legend: {
            data: this.timerList,
            y: 'top',
            x: 'right',
            padding: [60, 5, 0, 0],
            // 设置为可滚动的图例
            type: 'scroll',
            orient: 'vertical'
          },
          // 直角坐标系内绘图网格
          grid: {
            left: 50,
            right: 220,
            bottom: 40,
            // 区域是否包含坐标轴的刻度标签
            containLabel: false
          },
          // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
          toolbox: {
            // 各个工具配置
            feature: {
              // 保存为图片
              saveAsImage: {}
            }
          },
          // grid x轴
          //X轴
          xAxis: {
            type: "value",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            //不显示X轴刻度线和数字
            splitLine: {show: false},
            axisLabel: {show: false},
          },
          yAxis: {
            type: "category",
            data: cate,
            //升序
            inverse: true,
            splitLine: {show: false},
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            //key和图间距
            offset: 10,
            //动画部分
            animationDuration: 300,
            animationDurationUpdate: 300,
            //key文字大小
            nameTextStyle: {
              fontSize: 5,
            },
          },
          //动画部分

          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: "linear",
          animationEasingUpdate: "linear",
          series: [
            {
              //柱状图自动排序，排序自动让Y轴名字跟着数据动
              realtimeSort: true,
              name: "数量",
              type: "line",
              data: this.yDatas,
              barWidth: 14,
              barGap: 10,
              smooth: true,
              valueAnimation: true,
              //Y轴数字显示部分
              label: {
                normal: {
                  show: true,
                  position: "right",
                  valueAnimation: true,
                  offset: [5, -2],
                  textStyle: {
                    color: "#333",
                    fontSize: 13,
                  },
                },
              },
              itemStyle: {
                emphasis: {
                  barBorderRadius: 7,
                },
                //颜色样式部分
                normal: {
                  barBorderRadius: 7,
                  // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  //   { offset: 0, color: "#3977E6" },
                  //   { offset: 1, color: "#37BBF8" },
                  // ]),
                },
              },
            },
          ],
        }
      }
    },
    methods: {
      run() {
        for (var i = 0; i < this.yDatas.length; ++i) {
          if (Math.random() > 0.9) {
            this.yDatas[i] += Math.round(Math.random() * 2000);
          } else {
            this.yDatas[i] += Math.round(Math.random() * 200);
          }
        }
        this.charts.setOption({
          series: [
            {
              type: 'line',
              data:this.yDatas
            }
          ]
        });
      },
      updateEchart(list, holeDepth = 0, colorList) {
        for (let i = 0; i < 5; ++i) {
          this.yDatas.push(Math.round(Math.random() * 2000));
        }
        let yList = list[0]?.sbwyDetails?.map(x => x.depth) || []
        this.yList = [holeDepth, ...yList]
        let timerList = []
        let seriesList = []
        this.yList2 = []
        this.markAreas = {}
        var item2 = {}
        //设置岩性分布Y轴数组
        let yList2 = []
        colorList.map((x, index) => {
          yList2.push(x.startDepth, x.endDepth)
        })


        this.timerList = timerList
        this.seriesList = seriesList
        this.seriesList.push(item2)

        this.charts.clear()
        this.charts.setOption(this.options)
        setTimeout(() => {
          this.run();
        }, 0)
        setInterval(() => {
          this.run();
        }, 1000)
        this.charts.resize()
      },
      // echart随着窗口改变
      echartResize() {
        this.charts.resize()
      }
    },
    created() {
      const titleMap = {
        AB: '合成方向相对位移位移',
        AO: 'AO方向相对位移位移',
        BO: 'BO方向相对位移位移',
        X: 'X角度',
        Y: 'Y角度'
      }
      this.monitorName = titleMap[this.type]
    },
    mounted() {
      const Echarts = require('echarts')
      this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
      this.charts.on('click', params => {
        // 关闭tip提示
        this.charts.dispatchAction({type: 'hideTip'})
        this.$emit('showDialog', {params, type: this.type})
      })
      this.charts.on('mouseout', params => {
        // 关闭tip提示
        this.charts.dispatchAction({type: 'hideTip'})
      })
      window.addEventListener('resize', this.echartResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.echartResize)
    }
  }
</script>
